import { getInformationById as getInformationManager } from '@/services/api';
import { getCarById } from '@/services/api/car';
import { getOrderById } from '@/services/api/order';
import { getServiceById } from '@/services/api/service';
import { getInformationById as getInformationUser } from '@/services/api/user';
import { PageContainer } from '@ant-design/pro-components';
import { history, useLocation, useParams } from '@umijs/max';
import { useRequest } from 'ahooks-v3';
import { Button } from 'antd';
import React from 'react';
import CarDetail from './car';
import ManagerDetail from './manager';
import OrderDetail from './order';
import ServiceDetail from './service';
export interface IDetailProps {
	[key: string]: any;
}

const Detail: React.FC<IDetailProps> = () => {
	const { state } = useLocation();
	const { id } = useParams();
	const [dataSource, setDataSource] = React.useState<Record<string, any>>({});

	const { run: getDetailManager } = useRequest(() => getInformationManager(id), {
		manual: true,
		onSuccess: (res) => {
			setDataSource(res?.data);
		},
	});
	const { run: getDetailUser } = useRequest(() => getInformationUser(id), {
		manual: true,
		onSuccess: (res) => {
			setDataSource(res?.data);
		},
	});
	const { run: getCarDetail } = useRequest(() => getCarById(id), {
		manual: true,
		onSuccess: (res) => {
			setDataSource(res?.data);
		},
	});

	const { run: getServiceDetail } = useRequest(() => getServiceById(id), {
		manual: true,
		onSuccess: (res) => {
			setDataSource(res?.data);
		},
	});
	const { run: getOrderDetail } = useRequest(() => getOrderById(id), {
		manual: true,
		onSuccess: (res) => {
			setDataSource(res?.data);
		},
	});

	const getDetail = React.useMemo(() => {
		switch (state) {
			case 'manager':
				return getDetailManager;
			case 'user':
				return getDetailUser;
			case 'car':
				return getCarDetail;
			case 'service':
				return getServiceDetail;
			case 'order':
				return getOrderDetail;
		}
	}, [state]);

	const tabList = React.useMemo(() => {
		switch (state) {
			case 'manager':
				return [{ tab: '管理员信息', key: 'manager' }];
			case 'user':
				return [{ tab: '用户信息', key: 'user' }];
			case 'car':
				return [{ tab: '车辆信息', key: 'car' }];
			case 'service':
				return [{ tab: '服务信息', key: 'service' }];
			case 'order':
				return [{ tab: '订单信息', key: 'order' }];
			default:
				return [{ tab: '数据信息', key: 'data' }];
		}
	}, [state]);

	React.useEffect(() => {
		if (getDetail) {
			getDetail();
		}
	}, [state, id]);

	return (
		<PageContainer
			ghost
			tabList={tabList}
			extra={[
				<Button key="1" onClick={() => history.go(-1)}>
					返回
				</Button>,
			]}
		>
			{['manager', 'user'].includes(state as string) && (
				<ManagerDetail
					getDetail={getDetail}
					detailType={state as string}
					dataSource={dataSource || {}}
				/>
			)}
			{state === 'car' && <CarDetail getDetail={getDetail} dataSource={dataSource || {}} />}
			{state === 'service' && <ServiceDetail getDetail={getDetail} dataSource={dataSource || {}} />}
			{state === 'order' && <OrderDetail getDetail={getDetail} dataSource={dataSource || {}} />}
		</PageContainer>
	);
};

export default Detail;
